/*
 * @描述: 账户布局页面逻辑
 * @版权所有: 广东国星科技有限公司
 * @商业授权: www.mscodecloud.com
 */
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Icon } from 'antd';
import GlobalFooter from '@/components/GlobalFooter';
import DocumentTitle from 'react-document-title';
import SelectLang from '@/components/SelectLang';
import styles from './UserLayout.less';
import getPageTitle from '@/utils/getPageTitle';

class UserLayout extends Component {
  componentDidMount() {
    const {
      dispatch,
      route: { routes, authority },
    } = this.props;
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });
  }
  state = {
    collapse: "block",
    right: "130px"
  };
  togglerContent = () => {
    const { collapse, right } = this.state;
    if (collapse === "none") {
      this.setState({ collapse: "block" });
    } else {
      this.setState({ collapse: "none" });
    }
    if (right === "0px") {
      this.setState({ right: "130px" });
    } else {
      this.setState({ right: "0px" });
    }
  };
  render() {
    const {
      children,
      location: { pathname },
      breadcrumbNameMap,
    } = this.props;
    const { collapse, right } = this.state;

    const copyright = (
      <Fragment>
        <a className={styles.onlineService} onClick={this.togglerContent}>
          <div
            style={{
              right: right,
              position: "fixed",
              background: "#FF9900",
              width: "30px",
              height: "90px",
              fontSize: "14px",
              textAlign: "center",
              borderRadius: "4px 0 0 4px"
            }}>
            在<br />线<br />咨<br />询
          </div>
        </a>
        <div className={styles.onlineContent} style={{ display: collapse }}>
          咨询需求联系顾问
          <br />
          7x24小时即时响应
          <br />
          <a href="javascript:window.open('tencent://message/?uin=3228979148');">
            <img src="https://www.mscodecloud.com/static/3228979148.jpg" alt="QQ 3228979148" />
          </a>
          <br />
          (QQ 3228979148)
          <br />
          <hr />
          <img src="https://www.mscodecloud.com/static/wechat.jpg" alt="微信 15011899123" />
          <br />
          (微信 15011899123)
          <br />
        </div>
        Copyright <Icon type="copyright" /> 2021 广东国星科技有限公司
      </Fragment>
    );

    return (
      <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
        <div className={styles.container}>
          <div className={styles.lang}>
            <SelectLang />
          </div>
          <div className={styles.content}>
            <div className={styles.top}>
              <div className={styles.header}>
                <Link to="/">
                  <span className={styles.title}>MSCode微服务平台</span>
                </Link>
              </div>
              <div className={styles.desc}>MSCode前端UI项目，基于React、Ant Design、Umi、Dva等流行技术栈</div>
            </div>
            {children}
          </div>
          <GlobalFooter copyright={copyright} />
        </div>
      </DocumentTitle>
    );
  }
}

export default connect(({ menu: menuModel }) => ({
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
}))(UserLayout);
